<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:include="template/dashboard :: head('角色管理页面')">
    <!-- This block will be replaced by template. -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header" th:replace="template/dashboard :: main-header">
        <!-- This block will be replaced by template. -->
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar" th:replace="template/dashboard :: main-sidebar">
        <!-- This block will be replaced by template. -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <h1>客户端管理</h1>
                <p>在这里管理客户端（屁话）</p>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#" th:href="@{/}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li>OAuth2 管理</li>
                <li class="active">客户端管理</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Your Page Content Here -->
            <div class="row">
                <div class="col-md-12" th:include="template/messages :: messages">
                    <!-- This block will be replaced by template. -->
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">客户端列表</h3>
                            <div class="box-tools">
                                <th:block th:include="template/bootstrap :: page-navigation (pageable=${clientDetailsList})"></th:block>
                            </div>
                        </div>
                        <div class="box-body table-responsive no-padding">
                            <table class="table table-hover">
                                <tr>
                                    <th>#</th>
                                    <th>客户端ID</th>
                                    <th>AccessToken<br/>有效秒数</th>
                                    <th>RefreshToken<br/>有效秒数</th>
                                    <th>授权方式</th>
                                    <th>授权范围</th>
                                    <th>可用资源ID</th>
                                    <th>已注册<br/>跳转URI</th>
                                    <th>操作</th>
                                </tr>
                                <th:block th:each="clientDetails, iterStat : ${clientDetailsList}">
                                    <tr>
                                        <td th:text="${clientDetails.id}" rowspan="2">#</td>
                                        <td th:text="${clientDetails.clientId}" rowspan="2">客户端ID</td>
                                        <td th:text="${clientDetails.accessTokenValiditySeconds}">AccessToken<br/>有效秒数</td>
                                        <td th:text="${clientDetails.refreshTokenValiditySeconds}">RefreshToken<br/>有效秒数</td>
                                        <td>
                                            <span class="label label-primary" th:each="xref : ${clientDetails.authorizedGrantTypeXrefs}" th:text="${xref.grantType.value}">授权方式</span>
                                        </td>
                                        <td>
                                            <span class="label label-info" th:each="xref : ${clientDetails.scopeXrefs}" th:inline="text">[[${xref.scope.value}]]&nbsp;<span class="glyphicon glyphicon-ok" th:if="${xref.autoApprove}" data-toggle="tooltip" title="自动授权"></span></span>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-default" data-toggle="collapse"
                                                    th:attr="data-target=|#resource-id-${clientDetails.id}|,aria-controls=|resource-id-${clientDetails.id}|" aria-expanded="false" >点击查看</button>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-default" data-toggle="collapse"
                                                    th:attr="data-target=|#redirect-uri-${clientDetails.id}|,aria-controls=|redirect-uri-${clientDetails.id}|" aria-expanded="false" >点击查看</button>
                                        </td>
                                        <td>
                                            <a sec:authorize="hasRole('ROLE_ADMIN')" class="btn btn-danger" th:attr="data-remove-confirm=|确认要删除客户端 ${clientDetails.clientId} 吗？|"
                                               href="#" th:href="@{|/clientDetails/_remove/${clientDetails.clientId}|}" role="button">删除</a>
                                            <a sec:authorize="hasRole('ROLE_ADMIN')" class="btn btn-warning" href="#" th:href="@{'' (edit=${clientDetails.clientId})}" role="button">编辑</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="7">
                                            <div class="collapse" th:attr="id=|resource-id-${clientDetails.id}|">
                                                <h6>可用资源ID</h6>
                                                <span class="label label-success" th:each="xref : ${clientDetails.resourceIdXrefs}" th:text="${xref.resourceId.value}">可用资源ID</span>
                                            </div>
                                            <hr/>
                                            <div class="collapse" th:attr="id=|redirect-uri-${clientDetails.id}|">
                                                <h6>已注册跳转URI</h6>
                                                <ul>
                                                    <li th:each="urlXref, urlXrefIterStat : ${clientDetails.redirectUris}" th:text="${urlXref.value}">url</li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                </th:block>
                            </table>
                        </div>
                        <div class="box-footer clearfix">
                            <th:block th:include="template/bootstrap :: page-navigation (pageable=${clientDetailsList})"></th:block>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title" th:text="${param.containsKey('edit')?'编辑客户端':'增加客户端'}">编辑/增加客户端</h3>
                        </div>
                        <form action="#" th:action="${param.containsKey('edit')}? @{/clientDetails/_update} : @{/clientDetails/_create}" method="post">
                            <div class="box-body">
                                <div class="row">
                                    <div class="form-group col-lg-4">
                                        <label for="clientId">客户端ID</label>
                                        <input type="text" class="form-control" id="clientId" name="clientId" placeholder="客户端ID" required="required" th:value="${clientId}" th:disabled="${param['edit']}" />
                                        <input type="hidden" name="clientId" th:value="${clientId}" th:if="${param.containsKey('edit')}" />
                                    </div>
                                    <div class="form-group col-lg-4">
                                        <label for="clientSecret">客户端密码</label>
                                        <input type="text" class="form-control" id="clientSecret" name="clientSecret" placeholder="客户端密码" required="required" th:required="not ${param['edit']}" />
                                    </div>
                                    <div class="form-group col-lg-2">
                                        <label for="accessTokenValiditySeconds">AccessToken有效秒数</label>
                                        <input type="number" class="form-control" id="accessTokenValiditySeconds" name="accessTokenValiditySeconds" placeholder="AccessToken有效秒数" th:value="${accessTokenValiditySeconds}" />
                                    </div>
                                    <div class="form-group col-lg-2">
                                        <label for="refreshTokenValiditySeconds">RefreshToken有效秒数</label>
                                        <input type="number" class="form-control" id="refreshTokenValiditySeconds" name="refreshTokenValiditySeconds" placeholder="RefreshToken有效秒数" th:value="${refreshTokenValiditySeconds}" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>授权方式</label>
                                    <select multiple="multiple" name="grantTypes" class="form-control select2">
                                        <option th:each="grantType : ${grantTypes}" th:value="${grantType.value}" th:selected="${#lists.contains(#objects.nullSafe(selectedGrantTypes, {}), grantType.value)}" th:text="${grantType.value}">授权方式</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>授权范围</label>
                                    <select multiple="multiple" name="scopes" class="form-control select2">
                                        <option th:each="scope : ${scopes}" th:value="${scope.value}" th:selected="${#lists.contains(#objects.nullSafe(selectedScopes, {}), scope.value)}" th:text="${scope.value}">授权范围</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>自动授权范围</label>
                                    <select multiple="multiple" name="autoApproveScopes" class="form-control select2">
                                        <option th:each="scope : ${scopes}" th:value="${scope.value}" th:selected="${#lists.contains(#objects.nullSafe(selectedAutoApproveScopes, {}), scope.value)}" th:text="${scope.value}">授权范围</option>
                                    </select>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="autoApproveAll" value="true" th:checked="${autoApproveAll}" />
                                        <span class="label label-danger">全范围自动授权</span>
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>可用资源ID</label>
                                    <select multiple="multiple" name="resourceIds" class="form-control select2">
                                        <option th:each="resourceId : ${resourceIds}" th:value="${resourceId.value}" th:selected="${#lists.contains(#objects.nullSafe(selectedResourceIds, {}), resourceId.value)}" th:text="${resourceId.value}">可用资源ID</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="redirectUris">注册跳转URI</label>
                                    <textarea class="form-control" id="redirectUris" rows="3" name="redirectUris" th:text="${redirectUris}"></textarea>
                                    <span class="help-block">一行一个URI</span>
                                </div>
                            </div>
                            <div class="box-footer">
                                <div class="form-group">
                                    <div class="pull-right">
                                        <button type="submit" class="btn btn-primary">提交</button>
                                        <a type="button" class="btn btn-default" href="#" th:href="@{/clientDetails}">取消</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer" th:replace="template/dashboard :: main-footer">
        <!-- This block will be replaced by template. -->
    </footer>

    <th:block th:replace="template/dashboard :: control-sidebar">
        <!-- This block will be replaced by template. --></th:block>
</div>
<!-- ./wrapper -->

<th:block th:replace="template/dashboard :: required-js-scripts">
    <!-- This block will be replaced by template. -->
</th:block>
<script type="text/javascript">
    $(function() {
       activeMenus('客户端管理')
    });
</script>
</body>
</html>
